Introduction

Now you can experiment with creating a Canvas App using Excel and OneDrive for Business. To prepare for this exercise, you'll need to download the Conference Information.xlsx file and the Conference Information Images folder and then upload these to your OneDrive. Do not rename the files or create a different folder structure.

What the app needs to do

PLLearn are about to run a two-day conference for all staff. You have been asked to create an events app which can be shared with all employees in advance of the conference so that they can choose which event they want to attend. There are multiple events planned over two days. The staff using the app will need to see the complete list of the events and the app will also need to include information such as the event title and its location. It should also show the speaker’s name and title.

Create the app

  1. Go to https://make.powerapps.com and sign in with your organizational account.

  2. Use the steps demonstrated in this lesson to create a new canvas app by connecting to the Conference Information.xlsx  file which you have saved to OneDrive. The Excel file contains a table called Events which will be the source for the new App.

  3. Once you have created the App and it is visible in the canvas app design screen , take a few minutes to explore the three screens provided. You can use the right arrow link to see the details of an event or use the screen selector choice at the bottom left of the design screen to move between the three pages that have Power Apps has automatically created.

Customize the app

  1. In the BrowseGallery1 area on the first screen, you will see an image of the room where the event is to take place and two other pieces of information such as the day or title details.

  2. The first page of this app needs to show the user the title and location of the event as well as the speakers name and the scheduled day. You can customize the information showing on the first screen to ensure that this is what the user sees when they load the app.

When you are customizing the screen keep these points in mind:

  1. Examine the second screen DetailsScreen1 and make any changes you think would improve the appearance of the page. Keep the user experience in mind. For example, is it a little crowded? Will it be difficult for the user to pick out key details?

You can use the drag and drop method to re-organize and resize elements such as the image of the venue. In fact, do you need the photo here as it also shows on the first page? If not, simply selecting it and pressing delete will remove it.

The Third Screen in the app

Now that you have created the app, explore how you can move from one screen to another in play mode. Select an entry on the first screen. By doing this you move automatically to the second details screen. From here, you can use the Pencil Icon in the top right corner to go to the third screen which is an edit screen.

Change the duration figure of the event you are viewing and click on the tick mark in the top right corner of the edit screen to confirm the change. Use the navigate button in the top left to step back and view the amendment in the first and second screens. Select another event and navigate to the edit screen. Make a change to the duration but this time click on the X in the top left corner to cancel the amendment. Confirm that the duration for the event is unchanged in the other two screens.

Adding a Fourth Screen

  1. In the Design Canvas , click on the New Screen drop down and choose Blank . If you look at the screen indicator at the bottom of the canvas, you will see that you are now in Screen4 . If you scroll to the bottom of the Tree View on the left-hand side, you will see Screen4 listed there. Click on the three dots to the right to open the shortcut menu and rename the screen My Notes .

  2. On the Insert Ribbon , click on the Text option to open the drop down and then choose Text Input . Resize the text box so that it occupies the full screen. Users will need to be able to type more than one line of text in this notes area so in the properties on the right-hand side, scroll to the Mode option and change this to multiline.

  3. Now you will need to provide a way for the user to navigate from the details screen on an event to the My Notes screen. Switch back to DetailsScreen1 and use the + symbol on the navigation bar on the left to begin adding another element to the screen.

  4. Find the Button option and drag it to the details screen. Resize it and reposition it where you would like the button to appear for the user. Use the properties pane on the right to customize features of the button such as the color or the text on the button. Change the text on the button to read “Notes” .

  5. The last step is to customize the button so that it will perform the action of taking the user from the details screen to the My Notes screen. You do this with a function statement in the fx box. You will be learning more about functions shortly but for now, with the button selected, begin by typing Navigate and open bracket in the FX box. Now, you will notice that there is a list of screens that you can select from. Select the My Notes screen and then type a comma. From the next list of choices presented select ScreenTransition.None and type a closed bracket to complete the formula.

You can double check your entry in the example provided below.

Example:

The final entry in the FX box will read:

Navigate('My Notes',ScreenTransition.None)

Experiment with this new functionality in play mode. Clicking on the button should now move you to the My Notes screen.

  1. Save and close your app.